<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { useServerStore } from "../../store/server";
const store = useServerStore();
import hdialog from "../r-dialog.vue";
import { onMounted, ref } from "vue";
const bntlist = [
  { id: 1, name: "下属全部客户" },
  { id: 2, name: "下属停用" },
  { id: 3, name: "下属标☆" },
];
const oneid = ref(1);
const itemid = (id: number) => {
  oneid.value = id;
};
const emit = defineEmits(["onshow"]);
const tableDataone = ref([
  {
    name: "谷歌公司",
    source: "",
    suoname: "个人",
    laiyuan: "网上开拓",
    unitname: "",
    isstat: "否",
  },
  {
    name: "谷歌公司",
    source: "",
    suoname: "个人",
    laiyuan: "网上开拓",
    unitname: "",
    isstat: "否",
  },
]);
const shows = ref(false);
const sel = ref(false);
const show = (items) => {
  shows.value=true;
  store.showload(items);
};
const filterTable = ref([
  {
    name: "谷歌公司",
    source: "",
    suoname: "个人",
    laiyuan: "网上开拓",
    unitname: "",
    isstat: "否",
  },
  {
    name: "谷歌公司",
    source: "",
    suoname: "个人",
    laiyuan: "网上开拓",
    unitname: "",
    isstat: "否",
  },
]);
const list = ref([
  { id: 1, type: "base_name", flag: false, name: "申请人" },
  { id: 2, type: "base_deptname", flag: false, name: "申请人部门" },
  { id: 3, type: "sericnum", flag: false, name: "单号" },
  { id: 4, type: "name", flag: true, name: "客户名称" },
  { id: 5, type: "suoname", flag: true, name: "所属人" },
  { id: 6, type: "type", flag: true, name: "类型" },
  { id: 7, type: "laiyuan", flag: true, name: "来源" },
  { id: 8, type: "unitname", flag: true, name: "客户单位" },
  { id: 9, type: "tel", flag: false, name: "联系电话" },
  { id: 10, type: "mobile", flag: false, name: "手机" },
  { id: 11, type: "shi", flag: false, name: "所在市" },
  { id: 12, type: "sheng", flag: false, name: "所在省" },
  { id: 13, type: "email", flag: false, name: "邮箱" },
  { id: 14, type: "address", flag: false, name: "地址" },
  { id: 15, type: "routeline", flag: false, name: "交通路线" },
  { id: 16, type: "status", flag: false, name: "状态" },
  { id: 17, type: "isstat", flag: true, name: "是否标星" },
  { id: 18, type: "isgys", flag: false, name: "是否供应商" },
  { id: 19, type: "linkname", flag: false, name: "联系人" },
  { id: 20, type: "explain", flag: false, name: "备注" },
  { id: 21, type: "htshu", flag: false, name: "合同数" },
  { id: 22, type: "moneryz", flag: false, name: "销售总额" },
  { id: 23, type: "moneryd", flag: false, name: "代销总额" },
  { id: 24, type: "lie", flag: false, name: "操作列" },
]);
const newlist = ref([]);
const seleed = () => {
  sel.value=false;
  newlist.value = list.value.filter((item) => item.flag);
};
interface tableData {
  base_name: String; //申请人
  base_deptname: String; //申请人部门
  sericnum: String; //单号
  name: String; //客户名称
  suoname: String; //所属人
  type: String; //类型
  laiyuan: String; //来源
  unitname: String; //客户单位
  tel: String; //联系电话
  mobile: String; //手机
  shi: String; //所在市，
  sheng: String; //所在省
  email: String; //邮箱
  address: String; //地址
  routeline: String; //交通路线
  status: String; //状态
  isstat: String; //是否标星
  isgys: String; //是否供应商
  linkname: String; //联系人
  explain: String; //备注
  htshu: String; //合同数
  moneryz: String; //销售总额
  moneryd: String; //代销总额
  lie: String; //操作列
}
onMounted(() => {
  seleed();
});

const inp = ref("");
console.log(inp.value);
const handeltable = () => {
  filterTable.value = gettable();
};
const gettable = () => {
  if (inp.value === "") {
    console.log(inp.value);
    return (tableDataone.value = tableDataone.value);
  } else {
    console.log(inp.value);
    return tableDataone.value.filter((item) => {
      item.name.includes(inp.value) ||
        item.laiyuan?.includes(inp.value) ||
        item.address?.includes(inp.value) ||
        item.linkname?.includes(inp.value) ||
        item.mobile?.includes(inp.value) ||
        item.tel?.includes(inp.value);
    });
  }
};
const showlist = (row) => {
  var popup = window.open(
    "https://example.com",
    "newWindow",
    "width=800,height=400"
  );
  store.showload(row);
  
  popup.document.write(`
    <html>
      <head>
        <style>
        .name div {
          border: 1px solid black;
          }
        .namsex {
          width: 800px;
          margin: 0 auto;
        }
        .namsex div{
          height: 50px;
          line-height: 50px;
        }
        .h1{
          font-size: 20px;
          text-align: center;
          margin-bottom: 20px;
        }
        body{
          overflow:hidden;
        }
        </style>
        <title>${row.name}</title>
      </head>
      <body>
        <div class="name">
        <h1 class="h1">客户管理</h1>
        <div class="namsex">
          <div style="display: flex">
            <div style="width: 10%">客户名称</div>
            <div style="width: 90%">${store.data.name}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">申请人</div>
            <div style="width: 90%">${store.data.base_name}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">客户类型</div>
            <div style="width: 90%">${store.data.type}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">来源</div>
            <div style="width: 90%">${store.data.laiyuan}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系电话</div>
            <div style="width: 90%">${store.data.tel}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在市</div>
            <div style="width: 90%">${store.data.shi}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在省</div>
            <div style="width: 90%">${store.data.sheng}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">地址</div>
            <div style="width: 90%">${store.data.address}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">交通路线</div>
            <div style="width: 90%">${store.data.routeline}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">状态</div>
            <div style="width: 90%">${store.data.status}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">是否标星</div>
            <div style="width: 90%">${store.data.isstat}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">供应商</div>
            <div style="width: 90%">${store.data.isgys}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系人</div>
            <div style="width: 90%">${store.data.linkname}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">说明</div>
            <div style="width: 90%">${store.data.explain}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">合同数</div>
            <div style="width: 90%">${store.data.htshu}</div>
          </div>
        </div>
      </div>
      </body>
    </html>
  `);
};
// const openNewWindow = (row: any) => {
//   window.open("http://localhost:5173/#/client/clientlist", "_blank");
// };
// const handleRowClick = (row: any) => {
//   openNewWindow(row);
// };

// onMounted=(()=>{
//   handeltable()
// })
</script>

<template>
  <div>
    <!-- 详情 -->
    <hdialog v-model="shows" :width="`800px`" class="name">
      <h1 class="h1">客户管理</h1>
      <div class="namsex">
        <div style="display: flex">
          <div style="width: 10%">客户名称</div>
          <div style="width: 90%">{{ store.data.name }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">申请人</div>
          <div style="width: 90%">{{ store.data.base_name }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">客户类型</div>
          <div style="width: 90%">{{ store.data.type }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">来源</div>
          <div style="width: 90%">{{ store.data.laiyuan }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">联系电话</div>
          <div style="width: 90%">{{ store.data.tel }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">所在市</div>
          <div style="width: 90%">{{ store.data.shi }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">所在省</div>
          <div style="width: 90%">{{ store.data.sheng }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">地址</div>
          <div style="width: 90%">{{ store.data.address }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">交通路线</div>
          <div style="width: 90%">{{ store.data.routeline }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">状态</div>
          <div style="width: 90%">{{ store.data.status }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">是否标星</div>
          <div style="width: 90%">{{ store.data.isstat }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">供应商</div>
          <div style="width: 90%">{{ store.data.isgys }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">联系人</div>
          <div style="width: 90%">{{ store.data.linkname }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">说明</div>
          <div style="width: 90%">{{ store.data.explain }}</div>
        </div>
        <div style="display: flex">
          <div style="width: 10%">合同数</div>
          <div style="width: 90%">{{ store.data.htshu }}</div>
        </div>
      </div>
    </hdialog>
    <!-- 自定义列表 -->
    <hdialog v-model="sel">
      <div class="divs">
        <div v-for="item in list" :key="item.id">
          <el-checkbox v-model="item.flag" size="large">{{
            item.name
          }}</el-checkbox>
        </div>
      </div>
      <template #footer>
        <div class="bottom">
          <el-button @click="seleed">保存(s)</el-button>
          <el-button @click="">取消</el-button>
        </div>
      </template>
    </hdialog>

    <div class="flex">
      <div>
        <el-input
          class="m-2"
          style="width: 150px"
          placeholder="关键字"
          v-model="inp"
        ></el-input>
        <el-button @click="handeltable">搜索</el-button>

        <el-button style="width: 20px; padding: 0px; margin-right: 30px">
          <el-dropdown>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>高级搜索</el-dropdown-item>
                <el-dropdown-item @click="()=>{
                  sel=true
                }"
                  >自定义列显示</el-dropdown-item
                >
                <el-dropdown-item>打印</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button>
        <el-button
          v-for="item in bntlist"
          @click="itemid(item.id)"
          :key="item.id"
          :class="{ on: item.id == oneid }"
          >{{ item.name }}</el-button
        >
      </div>
      <div>
        <el-button>重新计算</el-button>
        <el-button>
          <el-dropdown>
            <span class="el-dropdown-link">
              操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>导出全部</el-dropdown-item>
                <el-dropdown-item>导出当前页</el-dropdown-item>
                <el-dropdown-item>订阅此列表</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button>
      </div>
    </div>
    <el-table
      ref="singleTableRef"
      empty="没有数据"
      width="100%"
      :border="true"
      highlight-current-row
      :data="filterTable"
      style="width: 100%"
    >
      <!-- 添加其他列 -->
      <el-table-column type="index" width="50" />
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column
        v-for="item in newlist"
        :key="item.id"
        :prop="item.type"
        :label="item.name"
      />
      <!-- 添加操作列 -->
      <el-table-column>
        <template #default="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link">
              操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="show(row)">详情</el-dropdown-item>
               
                <el-dropdown-item @click="showlist(row)"
                  >详情(新窗口)</el-dropdown-item
                >
                <el-dropdown-item >评论</el-dropdown-item>
                <el-dropdown-item  @click="show(row)"> 添加跟进记录</el-dropdown-item>
           
               
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.on {
  background-color: transparent;
  display: inline-block;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-color: #4e4f50;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
}

.el-button {
  margin: 0;
  color: black;
}
.el-button:focus {
  color: black;
}
.el-button:hover {
  background: none;
  border-color: #4e4f50;
  color: black;
}
.divs {
  height: 200px;
  overflow: auto;
}
.mar {
  margin-right: 10px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.bottom {
  margin-top: 20px;
  width: 100%;
  height: 40px;
  background: rgb(238, 238, 238);
}
.name div {
  border: 1px solid black;
}
.namsex {
  width: 600px;
  margin: 0 auto;
}
.namsex div {
  height: 50px;
  line-height: 50px;
}
.h1 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
</style>